<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script type="text/javascript" th:inline="javascript">
        function search() {
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/teacher/page?name=" + name;
        }

        function inputLoad(){
            let searchInput = [[${name}]];
            if (searchInput != null){
                $("#condition").val(searchInput);
            }
        }

        function homePage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/teacher/page?pageNum=1&name=" + name;
        }

        function prePage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/teacher/page?pageNum=" + [[${current - 1}]] + "&name=" + name;
        }

        function nextPage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/teacher/page?pageNum=" + [[${current + 1}]] + "&name=" + name;
        }

        function lastPage(){
            let name = $("#condition").val();
            window.location.href = "http://localhost:313/teacher/page?pageNum=" + [[${lastPage}]] + "&name=" + name;
        }
    </script>
</head>
<style>
    table {
        text-align: center;
    }

    #searchButton {
        position: absolute;
        margin-top: -1px;
    }
</style>
<body onload="inputLoad()">
      <h1>教师风采</h1>
      <div class="row">
          <div class="col-lg-3">
              <div class="input-group">
                  <input id="condition" type="text" class="form-control" placeholder="请输入教师名">
                  <span class="input-group-btn">
                            <button class="glyphicon glyphicon-search btn btn-default" id="searchButton" onclick="search()">
                            </button>
                    </span>
              </div>
          </div>
      </div>
      <table class="table" style="text-align: center">
          <tr>
              <td>
                  <div th:each="teacher:${teachers}">
                      <div class="col-sm-6 col-md-4">
                          <div class="thumbnail">
                              <img th:src="${teacher.img}" />
                              <div class="caption" style="text-align: center">
                                  <h3 th:text="${teacher.name}"></h3>
                                  <p> <a th:href="'/teacher/detail?id='+${teacher.id}">更多</a></p>
                              </div>
                          </div>
                      </div>
                  </div>
              </td>
          </tr>
          <tr>
              <td>
                  <button class="btn btn-primary" onclick="homePage()">首页</button>&nbsp;&nbsp;<button class="btn btn-primary" onclick="prePage()">上一页</button>&nbsp;&nbsp;<p style="display: inline" th:text="'总共'+${total}+'条记录 当前第'+${current}+'页'"></p>&nbsp;&nbsp;<button class="btn btn-primary" onclick="nextPage()">下一页</button>&nbsp;&nbsp;<button class="btn btn-primary" onclick="lastPage()">尾页</button>
              </td>
          </tr>
      </table>
</body>
</html>